<!-- 底部导航栏 -->
<template>
    <div v-if="showStatus" class="edit-main-tabbar" :style="tabbarStyle">
        <div
            v-for="(item, index) in tabbarData.list"
            :style="{
                color: item.router === pageId ? tabbarData.selectedColor : tabbarData.color
            }"
            class="tabbar-item"
            @click="onSelectTabbar(item.router)"
        >
            <el-image :src="item.router === pageId ? item.selectedIconPath : item.iconPath" fit="fill">
                <template #placeholder>
                    <div class="picture-image-slot"></div>
                </template>
                <template #error>
                    <div class="picture-image-slot no-image"></div>
                </template>
            </el-image>
            <div class="tabbar-item-title">
                {{ item.text }}
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { useEditStore } from '@/store'
import { setEditSettingPaneType } from '@/components/edit/edit-setting-pane'
export default defineComponent({
    name: 'EditMainTabbar',
    setup() {
        const editStore = useEditStore()

        const tabbarData = computed(() => editStore.tabbarData)
        const tabbarStyle = computed(() => {
            const { color, backgroundColor, borderStyle } = tabbarData.value
            return {
                color,
                backgroundColor,
                borderTopColor: borderStyle
            }
        })

        const pageId = computed(() => editStore.pageId)
        const showStatus = computed(
            () => tabbarData.value.list.length > 0
                && tabbarData.value.list.some(item => item.router === pageId.value)
        )

        const onSelectTabbar = router => {
            setEditSettingPaneType('tabbar')
        }

        return {
            tabbarData,
            tabbarStyle,
            pageId,
            showStatus,
            onSelectTabbar
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-main-tabbar.less';
</style>